<template>
  <div class="bi-formula-calculation">
    <div class="input-view" @mousedown="onMousedown">
      <div></div>
      <span class="input-list" v-show="inputList.length > 0">
        <span
          class="text-view"
          :style="{
            background: colorFilter(pinyinFilter(item.value), colorList),
          }"
          v-for="(item, index) in inputList"
          :key="item + index"
        >
          <span>{{ item.value }}</span>
        </span>
        <span class="cursor" v-if="!show">|</span>
      </span>
      <el-autocomplete
        ref="test"
        v-if="show"
        v-model.trim="input"
        :fetch-suggestions="querySearch"
        clearable
        class="inline-input w-50"
        placeholder=""
        @keyup.enter.stop="handleKeyEnter(input)"
        @keyup.delete.stop="handleKeyDelete(input)"
        @keyup.left.stop="handleKeyDelete(input)"
        @select="handleSelect"
      >
        <template #default="{ item }">
          <div class="value-view">
            <span>{{ item.value }}</span>
            <!-- <span class="link" v-show="item.field === true">{{ item.name }}</span> -->
          </div>
        </template>
      </el-autocomplete>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, watch, defineExpose } from "vue";
import {
  ffSymbol,
  calculationSymbol,
  restaurantsArr,
  colorList,
} from "./constants";
import { formulaVerify } from "./utils";
import { colorFilter, pinyinFilter } from "@/utils";
const show = ref(false);
const input = ref("");
const formula = ref("");
const result = ref();
const test = ref();
const inputList = reactive([]);
const restaurantsActive = reactive([]);
defineExpose({ result });
const props = defineProps({
  /**
   * 默认值 {
   * 'valueCalculation':"值计算",
   * 'dataType':"数据筛选公式",
   * 'trueOrFalse':"布尔值计算 true or false"
   * }
   */
  calculationType: {
    type: String,
    required: false,
    default: "valueCalculation",
  },
});
const restaurants = ref(restaurantsArr);
const onMousedown = () => {
  show.value = true;
  test.value;
  console.log("onMousedown", "按下事件");
};
const querySearch = (queryString, cb) => {
  let results = queryString
    ? restaurants.value.filter(createFilter(queryString))
    : [...ffSymbol, ...calculationSymbol[props.calculationType]];
  restaurantsActive.value = results;
  cb(results);
};
const createFilter = (queryString) => {
  return (restaurant) => {
    return (
      restaurant.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0 ||
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    );
  };
};
const handleSelect = (item) => {
  inputList.push(item);
  input.value = "";
};
const handleKeyEnter = (val) => {
  if (restaurantsActive.value[0].value !== "" && input.value !== "") {
    inputList.push(restaurantsActive.value[0]);
    input.value = "";
  }
};
const handleKeyDelete = (val) => {
  console.log("input退格、删除", val);
  if (val === "") {
    show.value = false;
  }
};
const handleViewKeyEnter = (val) => {
  console.log("view回车", val);
};
const handleViewKeyDelete = () => {
  console.log("view退格、删除");
  if (input.value === "" && inputList.length > 0 && show.value === false) {
    inputList.pop();
  }
};
const keyDown = () => {
  document.onkeydown = (e) => {
    //事件对象兼容
    let e1 = e || event || window.event || arguments.callee.caller.arguments[0]; //键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40 //左
    // console.log(e1.keyCode);
    if (e1 && e1.keyCode == 8) {
      handleViewKeyDelete();
      // console.log('按下右箭头');
    } else if (e1 && e1.keyCode == 32) {
      show.value = true;
    }
  };
};
onMounted(() => {
  keyDown();
});
watch(inputList, (newValue, oldValue) => {
  // console.log(newValue,oldValue)
  formula.value = newValue
    .map((obj, index) => {
      return obj.value;
    })
    .join("");
  result.value = newValue
    .map((obj, index) => {
      return obj.name;
    })
    .join("");
});
</script>
<style lang="scss">
@keyframes test {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes test {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.bi-formula-calculation {
  min-height: 3.8rem;
  .input-view {
    height: 2.8rem;
    border: 1px solid #ccc;
    border-radius: 0.06rem;
    box-sizing: border-box;
    padding: 0.1rem 0.16rem;
    .input-list {
      .text-view {
        display: inline-block;
        height: 0.24rem;
        line-height: 0.24rem;
        padding: 0 0.08rem;
        border-radius: 0.04rem;
        background-color: #e8f7ff;
        margin-right: 0.08rem;
        margin-bottom: 0.1rem;
        position: relative;
        .delete-icon {
          position: absolute;
          top: -0.05rem;
          right: -0.05rem;
        }
      }
      .cursor {
        animation: test 1000ms infinite;
        -webkit-animation: test 1000ms infinite;
      }
    }
  }

  .el-input__wrapper {
    background-color: #fff !important;
    border-color: #fff !important;
    &:hover {
      border-color: #fff !important;
    }
  }
}
.value-view {
  width: 100%;
  display: flex;
  align-items: center;
  span {
    margin-right: 0.06rem;
  }

  &:hover {
    border-color: #f2f3f5 !important;
  }
}
</style>